<template>
  <div id="con">
    <!-- <h1>登录页面的布局</h1> -->
    <div class="dig">
      <div class="content">
        <view class="content-left">
          <div class="content-left-imgbox">
            <img class="content-left-img" src="@/assets/logo.png" />
          </div>
          <h4>欢迎!</h4>
          <h4>智学商城-后台管理系统</h4>
        </view>
        <div class="content-right">
          <h4 class="content-right-login">登录</h4>

          <el-form ref="ruleFormRef" :model="ruleForm" class="demo-ruleForm">
            <el-form-item prop="username">
              <el-input
                class="right-input"
                v-model="ruleForm.username"
                type="text"
                placeholder="输入账号"
                :prefix-icon="User"
                autocomplete="off"
              />
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                class="right-input"
                v-model="ruleForm.password"
                type="password"
                autocomplete="off"
                placeholder="密码"
                :prefix-icon="Lock"
              />
            </el-form-item>

            <el-form-item>
              <el-button class="right-button" type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { User, Lock } from "@element-plus/icons-vue";
import { ElMessage as $msg } from "element-plus";
import Cookies from "js-cookie";
import http from "@/util/http";
import { mapActions } from "vuex";
import store from "@/store"
export default {
  setup() {
    return {
      User,
      Lock,
    };
  },
  data() {
    return {
      ruleForm: {
        _gp: "admin",
        _mt: "login",
        username: "",
        password: "",
      },
    };
  },
  methods: {
    ...mapActions(["getUserInfo"]),
    submitForm() {
      if (this.ruleForm.username.length == 0) {
        $msg.error("请输入账号");
        return;
      }
      if (this.ruleForm.password.length == 0) {
        $msg.error("请输入密码");

        return;
      }
      if (this.ruleForm.username !== "" && this.ruleForm.password !== "") {
        http
          .post(this.ruleForm)
          .then((res) => {
              // debugger
            if (200 == res.data.errno) {
              // 登录成功将账号与密码存储到vuex
              // let datas = {
              //   username: this.ruleForm.userName,
              //   password: this.ruleForm.password,
              // };
              let {username,password}=this.ruleForm

              // store.dispatch("getUserInfo", datas);
              this.getUserInfo({username,password})

              Cookies.set("token", res.data.data, { expires: 1 / 24 / 2 }); // 将token存储在Cookies里,设置过期时间为半个小时
              $msg.success("登录成功");
              if (this.$route.query.ind) {
                //如果路由前置守卫有标记
                this.$router.push({ path: this.$route.query.ind }); //那么路由就跳入标记的路由页面
              } else {
                this.$router.push({ path: "/" }); //否则就跳到首页
              }
            } else {
              $msg.warning("登录失败! 账号或者密码错误!");
            }
          })
          .catch((err) => {
            console.log(err);
            $msg.warning("请求失败!");
          });
      }
    },
  },
};
</script>
<style lang="less" scoped>
#con {
  text-align: center;
  .dig {
    width: 100%;
    height: 100%;
    display: flex;
    background-image: url("../assets/login-back.png");
    background-size: 100% 100%;
    position: fixed;
    .back-img {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    width: 800px;
    height: 400px;
    border-radius: 3px;
    margin: auto;
    display: flex;

    top: 240px;
    left: 400px;
    overflow: hidden;
    .content-left {
      width: 35%;
      height: 100%;
      color: #fff;
      background-color: rgb(23, 63, 241);
      float: left;
      .content-left-imgbox {
        width: 80px;
        height: 80px;
        border: 1px solid #fff;
        border-radius: 50%;
        background-color: rgb(12, 233, 141);
        margin: auto;
        margin-top: 80px;
        overflow: hidden;

        .content-left-img {
          width: 100%;
          height: 100%;
          background-color: rgb(6, 46, 223);
        }
      }
    }
    .content-right {
      width: 65%;
      height: 100%;
      background-color: rgb(250, 250, 250);

      float: right;
      .content-right-login {
        margin-top: 80px;
      }
      .demo-ruleForm {
        // 表单
        width: 60%;
        height: 260px;
        margin: auto;
        padding: 0;
        .el-form-item {
          margin-top: 20px;
          .right-input {
            width: 100%;
            margin: auto;
            border: #ccc solid 1px;
            border-radius: 3px;
            background-color: rgb(239, 244, 248);
            margin: 0;
            padding: 0;
          }
          .right-button {
            width: 100px;
            margin-left: 110px;
          }
        }
      }
    }
  }
}
</style>
